<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--必要样式-->
<script src="<%=path %>/assets2/js/jquery-1.11.1.min.js"></script>
<link href="<%=path %>/assets/login/main.css" rel="stylesheet" type="text/css" />
<link href="<%=path %>/assets2/js/sweetalert/sweetalert.css" rel="stylesheet">
<script src="<%=path %>/assets2/js/sweetalert/sweetalert-dev.js"></script>
<script src="<%=path %>/assets2/js/sweetalert/sweetalert.min.js"></script>  
<link href="<%=path %>/assets2/css/bootstrap.min.css" rel="stylesheet">
<!-- All JS functions -->
<script src="<%=path %>/assets2/js/validation/validate.min.js"></script>
<script src="<%=path %>/assets2/js/validation/validationEngine.min.js"></script>
<script src="<%=path %>/assets2/js/validation/messages_zh.min.js"></script>
<!-- Bootstrap -->
<script src="<%=path %>/assets2/js/bootstrap.min.js"></script>

<!--  Form Related -->
<%-- <script src="<%=path %>/assets2/js/icheck.js"></script> <!-- Custom Checkbox + Radio --> --%>
<style type="text/css">
.buttonMsg {
	background-color: #31b6e7;
	border: none;
	font-weight: bold;
	margin-left: 30px;
	margin-top: 12px;
	color: #FFF;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
}

/* .ZC {
	border: none;
	font-weight: bold;
	color: #FFF;
	margin-left: 30px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: #CCC 0px 0px 5px;
	-moz-box-shadow: #CCC 0px 0px 5px;
	box-shadow: #CCC 0px 0px 5px;
	background: #31b6e7;
	cursor: pointer;
} */

.textInput {
	border: 1px solid #CCC;
	padding: 5px;
	width:150px;
	background-color: #FCFCFC;
	line-height: 14px;
	font-size: 12px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: #CCC 0px 0px 5px;
	-moz-box-shadow: #CCC 0px 0px 5px;
	box-shadow: #CCC 0px 0px 5px;
	border: 1px solid #CCC;
	font-size: 12px;
}

.ZC {
	border: none;
	font-weight: bold;
	color: #FFF;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: #CCC 0px 0px 5px;
	-moz-box-shadow: #CCC 0px 0px 5px;
	box-shadow: #CCC 0px 0px 5px;
	background: #31b6e7;
	cursor: pointer;
}

.ZC:hover {
	background: #ff9229;
}

.ZC{
	padding: 6px 20px;
}
.formError {
     z-index: 990;
}

.formError .formErrorContent {
     z-index: 991;
}

.formError .formErrorArrow {
     z-index: 996;
}

.formErrorInsideDialog.formError {
     z-index: 5000;
}

.formErrorInsideDialog.formError .formErrorContent {
     z-index: 5001;
}

.formErrorInsideDialog.formError .formErrorArrow {
     z-index: 5006;
}

.inputContainer {
     position: relative;
     float: left;
}

.formError {
     position: absolute;
     display: block;
     cursor: pointer;
}

.ajaxSubmit {
     padding: 20px;
     background: #55ea55;
     border: 1px solid #999;
     display: none
}

.formError .formErrorContent {
     width: 100%;
     white-space: nowrap;
     text-align: left;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
     background: #D42915;
     position:relative;
     color: #fff;
     font-size: 11px;
     padding: 2px 7px 3px;
     bottom: 2px;
     text-shadow: none;
}

.greenPopup .formErrorContent {
     background: #33be40;
}

.blackPopup .formErrorContent {
     background: #393939;
     color: #FFF;
}

.formError .formErrorArrow {
   width: 15px;
   margin: -2px 0 0 13px;
   position: absolute;
   bottom: -7px;
   right: 10px;
}

.formError .formErrorArrowBottom {
     box-shadow: none;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     margin: 0px 0 0 12px; top:2px;
}

.formError .formErrorArrow div {
     font-size: 0px;
     height: 1px;
     background: #D42915;
     margin: 0 auto;
     line-height: 0;
     font-size: 0;
     display: block;
}

.formError .formErrorArrowBottom div {
     box-shadow: none;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
}

.greenPopup .formErrorArrow div {
     background: #33be40;
}

.blackPopup .formErrorArrow div {
     background: #393939;
     color: #FFF;
}

.formError .formErrorArrow .line10 {
     width: 11px;
     border: none;
}

.formError .formErrorArrow .line9 {
     width: 9px;
     border: none;
}

.formError .formErrorArrow .line8 {
     width: 7px;
}

.formError .formErrorArrow .line7 {
     width: 5px;
}

.formError .formErrorArrow .line6 {
     width: 3px;
}

.formError .formErrorArrow .line5 {
     width: 1px;
}

.formError .formErrorArrow .line4 {
     width: 0px;
}

.formError .formErrorArrow .line3 {
     width: 0px;
}

.formError .formErrorArrow .line2 {
     width: 0px;
     border: none;
     background: #ddd;
}

.formError .formErrorArrow .line1 {
     width: 0px;
     border: none;
     background: #ddd;
}

.checkableBox .formError {
   right: auto !important;
   left: 0 !important;
}
</style> 
</head>
<body>
	<div class="login">
    <div class="box png">
		<div class="logo png"></div>
		<div class="input">
			<div class="log">
			<form action="<%=path %>/j_spring_security_check" class="form-validation" method="post" id="loginForm">
				<div class="name">
					<label>用户名</label><input type="text" class="text validate[required]" id="value_1" autocomplete="off" placeholder="用户名" name="username" tabindex="1" >
				</div>
				<div class="pwd">
					<label>密　码</label><input type="password" class="text validate[required]" id="value_2" autocomplete="off" placeholder="密码" name="password" tabindex="2">
					<input type="submit" class="submit" tabindex="3" value="登录">
					<input type="button" onclick="loadMerchant()" tabindex="3" value="商家注册" style="margin-left: 50px;background-color: #ffffff;color: #31b6e7;cursor:pointer;">
					<div class="check"></div>
				</div>
				<div class="tip"></div>
			</form>
			<form  id="registerForm" action="<%=path %>/userRegister" class="form-horizontal form-validation" method="post">
			<h5 style="color: #61b5b0; margin-top: -30px;">商家注册</h5>
				<div class="form-group">
					<div class="col-xs-6"><input type="text" class="textInput validate[required]" autocomplete="off" id="userName" name="userName" placeholder="用户名"></div>
					<div class="col-xs-6"><input type="text" class="textInput validate[required,custom[phone]]" id="phone" name="phone" placeholder="手机号码(登录名)"></div>
				</div>
                <div class="form-group">
					<div class="col-xs-6"><input type="text" class="textInput validate[required]" id="volatileCode" name="volatileCode" placeholder="验证码"></div>
					<div class="col-xs-6"><button class="btn btn-sm btn-info" type="button" id="volatileCodeBtn" onclick="getVolatileCode()">获取验证码</button></div>
				</div>
               	<div class="form-group">
					<div class="col-xs-6"><input type="password" class="textInput validate[required]" id="password" name="password" placeholder="密码"></div>
					<div class="col-xs-6"><input type="password" class="textInput validate[required,equals[password]]" id="password2" name="password2" placeholder="确认密码"></div>
				</div>
 				<div class="form-group">
					<div class="col-xs-6">
						<select class="textInput validate[required]" name="schoolId" id="schoolId">
	                		<option value="">请选择学校</option>
	                	</select>
                	</div>
					<div class="col-xs-6">
						<button class="ZC" id="subRegistet" type="button">注册</button>
						<button class="ZC" id="cancelRegistet" type="button">取消</button>
					</div>				
				</div>
            </form>			
			</div>
		</div>
	</div>
    <div class="air-balloon ab-1 png"></div>
	<div class="air-balloon ab-2 png"></div>
    <div class="footer"></div>
</div>

<script type="text/javascript" src="<%=path %>/assets/login/fun.base.js"></script>
<script type="text/javascript" src="<%=path %>/assets/login/script.js"></script>
						
</body>
<script>
(function(){
	if($("[class*='form-validation']")[0]) {
	    $("[class*='form-validation']").validationEngine();
	    $('body').on('click', '.validation-clear', function(e){
		e.preventDefault();
		$(this).closest('form').validationEngine('hide');
	    });
	}
})();
$(function(){
	var error = '${SPRING_SECURITY_LAST_EXCEPTION.message}';
	if(error && typeof(error)!='undefined' && error!=''){
		swal({ 
			  title: "登录失败", 
			  text: error, 
			  type: "error",
			});
	}
	$("#registerForm").hide();
	$("#volatileCodeBtn").attr("onclick","getVolatileCode()");
	$('#subRegistet').bind("click",function(){
		subRegister();
	});
	$('#cancelRegistet').bind("click",function(){
		$("#loginForm").show();
		$("#registerForm").hide();
	});
	<% session.removeAttribute("SPRING_SECURITY_LAST_EXCEPTION");%>
});
//商家注册展示
function loadMerchant(){
	$("#loginForm").hide();
	$("#registerForm").show();
	$.ajax({
		 type:"POST",
        url: "<%=path %>/app/getSchoolList",
        success: function(data,status,xhr){
			for(var i=0;i<data.length;i++){
				$('#schoolId').append("<option value='"+data[i].schoolId+"'>"+data[i].schoolName+"</option>");
			}      		
        }
	});
};
//验证
function getVolatileCode(){
			var phone=$("#phone").val();
			if(phone==null||phone==''){
				swal({ 
					  title: "提交失败", 
					  text: "请输入手机号", 
					  type: "error",
					});
				return false;
			}else if(phone.length!=11){
				swal({ 
					  title: "提交失败", 
					  text: "请输入11位手机号", 
					  type: "error",
					});
				return false;
			}
			$("#volatileCodeBtn").removeAttr("onclick");
			$.ajax({
				 type:"POST",
		         url: "<%=path %>/getVolatileCode?phone="+phone,
		         success: function(data,status,xhr){
		        	if(data!=null&&data.state==1){
		        		var i=120;
						var interval=setInterval(function(){
							if(i>0){
								i--;
								$("#volatileCodeBtn").text("（"+i+"）s")
							}else{
								$("#volatileCodeBtn").text("获取验证码")
								$("#volatileCodeBtn").attr("onclick","getVolatileCode()");
								clearInterval(interval)
							}
						}, 1000)
		        	}else{
		        		swal({ 
							  title: "提交失败", 
							  text: "获取验证码失败，请稍后再试", 
							  type: "error",
							});
		        		$("#volatileCodeBtn").attr("onclick","getVolatileCode()");
		        	}
		         },
		         error:function(){
		        	 $("#volatileCodeBtn").attr("onclick","getVolatileCode()");
		         }
			})
};
//注册按钮提交
function subRegister(){
	if($("#registerForm").validationEngine("validate")){
		$.ajax({
			 type:"POST",
	         url: "<%=path %>/userRegister",
	         beforeSend: function(){
	        	 $("#subRegister").unbind("click");
	         },
	         data: $("#registerForm").serialize(),
	         success: function(data,status,xhr){
				if(data.state==1){
					swal({ 
						  title: "提交成功", 
						  text: "操作成功", 
						  type: "success",
						},function(){
							window.location.href="<%=path %>/login";
						});
				}else if(data.state==-1){
					swal({ 
						  title: "提交失败", 
						  text: "验证码不正确", 
						  type: "error",
						},function(){
							$('#subRegister').on("click",function(){
								subRegister();
							})
						});
				}else if(data.state==-2){
					swal({ 
						  title: "提交失败", 
						  text: "手机号已经存在", 
						  type: "error",
						},function(){
							$('#subRegister').on("click",function(){
								subRegister();
							})
						});
				}else{
					swal({ 
						  title: "提交失败", 
						  text: "操作失败", 
						  type: "error",
						},function(){
							$('#subRegister').on("click",function(){
								subRegister();
							})
						});
				}  		
	         }
		})
	}
};

</script>
</html>